<template>
  <view class="container">
    <uv-navbar title="登录" leftIconSize="0" placeholder></uv-navbar>
    <view style="display: flex;flex-direction: column;align-items: center;">
      <img class="logo" src="/static/images/logo.png" alt="" />
      <view class="desc">
        您好,欢迎来到北京单商户APP
      </view>
    </view>
    <view class="main">
      <view class="iptItme">
        <view class="label">
          手机号
        </view>
        <input class="ipt" type="text" placeholder-class="styles" v-model="fromLine.phone" placeholder="请输入手机号">
      </view>
      <!--      <view class="iptItme">
        <view class="label">
          密码
        </view>
        <input class="ipt" type="text" placeholder-class="styles" v-model="fromLine.password" placeholder="请输入密码">
      </view> -->
      <view class="iptItme">
        <view class="label">
          验证码
        </view>
        <view class="ipt" style="display: flex;align-items: center;padding-left: 0;">
          <input class="ipt" style="flex: 1;" type="text" placeholder-class="styles" v-model="fromLine.captcha"
            placeholder="请输入验证码">
          <text class="code-txt" @click="sendCode" v-if="!btnDisabled">
            获取验证码
          </text>
          <text class="code-txt" v-if="btnDisabled" style="font-size: 30rpx;">
            {{ countdown + " " + "s" }}
          </text>
        </view>
      </view>
      <view class="iptItme">
        <view class="label">
          邀请码
        </view>
        <input class="ipt" type="text" placeholder-class="styles" v-model="fromLine.spread" placeholder="请输入专属推荐人ID">
      </view>
      <!--      <view class="setting">
        <view class="toFotPwd" @click="toPwd">
          忘记密码
        </view>
        <view class="codeLogin" @click="toCode">
          验证码登录
        </view>
      </view> -->
    </view>
    <view class="footer">
      <view class="agreement" @click="handleToggle">
        <image class="round" :src="checked?'/static/images/roundActive.png':'/static/images/round.png'" mode="">
        </image>
        已阅读并同意
        <text class="xiey" @click.stop="toXiyiPage(4)">《用户协议》</text>
        和
        <text class="xiey" @click.stop="toXiyiPage(3)">《隐私政策》</text>
      </view>
      <view class="loginBtn" @click="handleLogin">登录</view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        fromLine: {
          phone: "15102122247",
          captcha: "1234567",
          spread: ""
        },
        btnDisabled: false,
        timer: null,
        countdown: 0,
        checked: false
      }
    },
    methods: {
      // 发送验证码
      sendCode() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.sendMsg({
          phone: this.fromLine.phone
        }).then(res => {
          uni.showToast({
            title: "验证码发送成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          this.countdown = 10;
          this.btnDisabled = true;
          if (this.timer) clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown -= 1;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.btnDisabled = false;
            }
          }, 1000);
        })
      },
      handleToggle() {
        this.checked = !this.checked;
      },
      toXiyiPage(type) {
        uni.navigateTo({
          url: `/pages/mine/aboutUs?type=${type}`
        })
      },
      toPwd() {
        uni.navigateTo({
          url: "/pages/home/resetPwd"
        })
      },
      toCode() {
        uni.navigateTo({
          url: "/pages/home/loginCode"
        })
      },
      handleLogin() {
        if (!this.checked) {
          uni.showToast({
            title: "请勾选协议",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.captcha) {
          uni.showToast({
            title: "请输入验证码",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.login(this.fromLine).then(res => {
          uni.setStorageSync("token", res.data.token);
          uni.showToast({
            title: "登录成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/home/index"
            })
          }, 1500)
        })
      }
    }
  }
</script>
<style>
  .styles {
    font-weight: 500 !important;
    font-size: 32rpx !important;
    color: #999 !important;
  }
</style>
<style lang="scss" scoped>
  .code-txt {
    font-weight: 500;
    font-size: 28rpx;
    color: #1C76FC;
  }

  .container {
    width: 100vw;
    height: 100vh;
    background: #fff;

    .logo {
      width: 128rpx;
      height: 128rpx;
      margin-top: 120rpx;
    }

    .desc {
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .main {
      padding: 0 28rpx;
      box-sizing: border-box;

      .iptItme {
        margin-top: 28rpx;

        .label {
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
          margin-bottom: 16rpx;
        }

        .ipt {
          width: 100%;
          height: 88rpx;
          background: #F8F8F8;
          border-radius: 40rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #333;
          padding: 0 30rpx;
          box-sizing: border-box;
        }
      }

      .setting {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 28rpx;
        color: #1C76FC;
        margin-top: 28rpx;

        .toFotPwd {}

        .codeLogin {}
      }
    }

    .footer {
      position: fixed;
      width: 100%;
      bottom: 110rpx;
      padding: 0 28rpx;
      box-sizing: border-box;

      .agreement {
        display: flex;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        align-items: center;
        justify-content: center;
        margin-bottom: 28rpx;

        .round {
          width: 24rpx;
          height: 24rpx;
          margin-right: 7rpx;
        }

        .xiey {
          color: #1C76FC !important;
        }
      }

      .loginBtn {
        width: 100%;
        height: 88rpx;
        background: #F86F03;
        border-radius: 40rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }
</style>